<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 数据表格</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico" tppabs="http://www.zi-han.net/theme/hplus/favicon.ico">
    <link href="${ctxPath}/css/bootstrap.min.css-v=3.3.5.css"
          tppabs="http://www.zi-han.net/theme/hplus/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="${ctxPath}/css/font-awesome.min.css-v=4.4.0.css"
          tppabs="http://www.zi-han.net/theme/hplus/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="${ctxPath}/css/plugins/sweetalert/sweetalert.css" tppabs="http://www.zi-han.net/theme/hplus/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <!-- Data Tables -->
    <link href="${ctxPath}/css/plugins/dataTables/dataTables.bootstrap.min.css" rel="stylesheet">

    <link href="${ctxPath}/css/animate.min.css" rel="stylesheet">
    <link href="${ctxPath}/css/style.min.css-v=4.0.0.css" rel="stylesheet">
    <base target="_blank">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Web爬虫链接管理</h5>

                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="table_data_tables.html#"
                           tppabs="http://www.zi-han.net/theme/hplus/table_data_tables.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="table_data_tables.html#"
                                   tppabs="http://www.zi-han.net/theme/hplus/table_data_tables.html#">选项1</a>
                            </li>
                            <li><a href="table_data_tables.html#"
                                   tppabs="http://www.zi-han.net/theme/hplus/table_data_tables.html#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="">
                        <a href="javascript:void(0);" class="btn btn-primary " data-toggle="modal"
                           data-target="#addCrawlerDataModal">添加行</a>
                    </div>
                    <table class="table table-striped table-bordered table-hover dataTables-example" id="editable">
                        <thead>
                        <tr>
                            <th>选择</th>
                            <th>URL</th>
                            <th>描述</th>
                            <th style="display: none"></th>
                            <th>根节点</th>
                            <th>解析器</th>
                            <th>爬取状态</th>
                            <th style="display: none"></th>
                            <th style="display: none"></th>
                        </tr>
                        </thead>
                        <tbody>


                        </tbody>
                        <tfoot>
                        <th>选择</th>
                        <th>URL</th>
                        <th>描述</th>
                        <th style="display: none"></th>
                        <th>根节点</th>
                        <th>解析器</th>
                        <th>爬取状态</th>
                        <th style="display: none"></th>
                        <th style="display: none"></th>
                        </tr>
                        </tfoot>
                    </table>

                </div>
            </div>
        </div>
    </div>
</div>
<!--添加行数据-->
<div class="modal inmodal" id="addCrawlerDataModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">关闭</span>
                </button>
                <h4 class="modal-title">新增爬取URL</h4>
            </div>
            <div class="modal-body">
                <form method="get" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">URL</label>

                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="add_url" name="url">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">描述</label>

                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="add_urlDecription" name="urlDecription">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">根节点</label>

                        <div class="col-sm-10">
                            <select class="form-control m-b" id="add_isRootUrl" name="isRootUrl">
                                <option value="0">是</option>
                                <option value="1">否</option>
                            </select>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">解析器</label>

                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="add_crawlerParser" name="crawlerParser"
                                   placeholder="网页链接解析器,不能为空!">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">爬取状态</label>

                        <div class="col-sm-10">
                            <select class="form-control m-b" id="add_crawlerStatus" name="crawlerStatus">
                                <option value="0">未爬取</option>
                                <option value="1">已爬取</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary" onclick="fnClickAddRow()">提交</button>
            </div>
        </div>
    </div>
</div>

</div>
<!--编辑行数据-->
<div class="modal inmodal" id="updateCrawlerDataModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">关闭</span>
                </button>
                <i class="fa fa-laptop modal-icon"></i>
                <h4 class="modal-title">编辑爬取URL</h4>
            </div>
            <div class="modal-body">
                <form method="get" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">URL</label>

                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edit_url" name="url">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">描述</label>

                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edit_urlDecription" name="urlDecription">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">根节点</label>

                        <div class="col-sm-10">
                            <select class="form-control m-b" id="edit_isRootUrl" name="isRootUrl">
                                <option value="1">是</option>
                                <option value="0">否</option>
                            </select>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">解析器</label>

                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edit_crawlerParser" name="crawlerParser"
                                   placeholder="网页链接解析器,不能为空">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">爬取状态</label>

                        <div class="col-sm-10">
                            <select class="form-control m-b" id="edit_crawlerStatus" name="crawlerStatus">
                                <option value="0">未爬取</option>
                                <option value="1">已爬取</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

</div>
<script src="${ctxPath}/js/jquery.min.js-v=2.1.4.js"></script>
<script src="${ctxPath}/js/bootstrap.min.js-v=3.3.5.js"></script>
<script src="${ctxPath}/js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="${ctxPath}/js/plugins/jeditable/jquery.jeditable.js"></script>
<script src="${ctxPath}/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="${ctxPath}/js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="${ctxPath}/js/content.min.js-v=1.0.0.js"></script>
<script>
    $(document).ready(function () {
        var oTable = $("#editable").dataTable({
            "autoWidth": true,
            language: {
                url: '/i18n/dataTable/chinese.json'
            },
            "processing": true,
            "serverSide": true,
            ajax: {
                "url": "list_web_crawler",
                "type": "POST"
            },
            columns: [
                {
                    data: "id", render: function (data, type, full, meta) {
                    return "<input type='checkbox' data-id='" + data + "'/>";
                }
                },
                {data: 'url'},
                {data: 'urlDecription'},
                {data: "parentUrl", "visible": false},
                {data: 'isRootUrl'},
                {data: 'crawlerParser'},
                {data: 'crawlerStatus'},
                {data: "createDate", "visible": false},
                {data: "updateDate", "visible": false}
            ]
        });
    });
    function fnClickAddRow() {
        //ajax
        var crawlerURL = new CrawlerURL();
        var params = crawlerURL.addCrawlerURLParams();
        $.ajax({
            url: 'add_crawler_url',
            type: 'put',
            data: JSON.stringify(params),
            contentType: "application/json; charset=utf-8",
            dataTypeString: "json",
            success: function (data) {
                if (data.success) {
                    var addCrawlerData = crawlerURL.addCrawlerURLArray();
                    /*$("#editable").dataTable().fnAddData(addCrawlerData);*/
                    $("#addCrawlerDataModal").modal("hide");
                } else {
                    swal("添加爬取URL提示", "无法添加爬取URL,请稍后再试!", "确定");
                }
            }
        });
    }
    ;
    var CrawlerURL = function () {
        this.addCrawlerURLParams = function () {
            var crawlerUrlWrapper = new Object();
            crawlerUrlWrapper.url = $("#add_url").val();
            crawlerUrlWrapper.urlDecription = $("#add_urlDecription").val();
            crawlerUrlWrapper.isRootUrl = $("#add_isRootUrl").val();
            crawlerUrlWrapper.crawlerParser = $("#add_crawlerParser").val();
            crawlerUrlWrapper.crawlerStatus = $("#add_crawlerStatus").val();
            return crawlerUrlWrapper;
        };
        this.addCrawlerURLArray = function () {
            var crawlerUrlArray = [$("#add_url").val(), $("#add_urlDecription").val(), $("#add_isRootUrl").val() == 0 ? "非根节点" : "根节点", $("#add_crawlerParser").val(), $("#add_crawlerStatus").val() == 0 ? "未爬取" : "已爬取"];
            return crawlerUrlArray;
        };
        this.validateAddCrawlerURLForm = function () {
            if ($("#add_url").val() == "") {
                $("#add_url").addClass();
            }
        }
    }
    var dataTableUtils = function () {
        this.combineDataTable = function (data) {
            var result = new Array();

        }
    }
</script>
</body>

</html>